<template>
  <view class="wrap">
    <view class="content">
      <view class="contentItem" v-for="item in typeList" :key="item.value" @click="goList(item.value)">
        <image
          src="../../static/login.png"
          mode="widthFix"
          style="width: 100%;"
        />
        <view class="contentMsg">
          <up-text type="" color="#fff" size="32" :text="item.label"></up-text>
        </view>
      </view>
    </view>
  </view>
  <custom-tab-bar/>
</template>

<script>
import { setTabBarSelected, setTabBarList, materialTypeEnum } from '@/utils/common'

export default {
  data() {
    return {
      typeList: [],
    }
  },
  computed: {
    isLogin() {
      const isLogin = this.$store.state.isLogin;
      console.log('isLogin', isLogin)
      setTabBarList(isLogin);
      setTabBarSelected(2);
      return isLogin;
    }
  },
  onLoad() {
    setTabBarList(true);
    this.getTypeList();
  },
  async onShow() {
    setTabBarSelected(2);
  },
  methods: {
    getTypeList() {
      this.typeList = Object.keys(materialTypeEnum).map((key) => {
        return {
          label: materialTypeEnum[key],
          value: key
        }
      })
    },
    goList(v) {
      uni.navigateTo({
        url: `/pages/material/type?type=${v}`
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
  background-color: #f2f2f2;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
}
.content {
  width: calc(100vw - 150rpx);
  padding: 30rpx;
  background-color: #fff;
  border-radius: 30rpx;
  box-shadow: 0 12rpx 32rpx 0 rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
}

.contentItem {
  border-radius: 100rpx;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}
.contentItem:last-child {
  margin-bottom: 0;
}

.contentMsg {
  position: absolute;
}
</style>
